<template>
<vs-modal :show.sync="show" effect="fade" width="800px">
  <div class="modal-header" slot="modal-header">
    <h4 class="modal-title">{{$t('common.detail')}}</h4>
  </div>  
  <div class="modal-body" slot="modal-body">
    <validator name="form">
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.name')}}</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" v-model="cfg.name">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.manufacture')}}</label>
          <div class="col-sm-8">
            <select class="form-control" v-model="cfg.manufacture">
              <option v-for="option in manufactureOptions">{{option}}</option>
            </select>
          </div>
        </div>  
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.productModel')}}</label>
          <div class="col-sm-8">
            <select class="form-control" v-model="cfg.productModel">
              <option v-for="option in productModelOptions">{{option}}</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.ipaddr')}}</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" v-model="cfg.ipaddr" v-validate:ipaddr="{ip: true}">
            <strong class="text-danger my-error" v-if="$form.ipaddr.ip">{{$t('error.invalidAddr')}}</strong>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.port')}}</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" v-model="cfg.port" number v-validate:port="{port: true}">
            <strong class="text-danger my-error" v-if="$form.port.port">{{$t('error.invalidPort')}}</strong>
          </div>
        </div>
        <div class="form-group" v-if="!batch">
          <label class="col-sm-3 control-label">{{$t('list.channel')}}</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" v-model="cfg.channel" number>
          </div>
        </div>
        <div class="form-group" v-if="batch">
          <label class="col-sm-3 control-label">{{$t('list.channelRange')}}</label>
          <div class="col-sm-4">
            <input type="text" class="form-control" v-model="startChannel" number>
          </div>
          <div class="col-sm-4">
            <input type="text" class="form-control" v-model="endChannel" number>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.username')}}</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" v-model="cfg.username">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.password')}}</label>
          <div class="col-sm-8">
            <input type="password" class="form-control" v-model="cfg.password">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.ptzStatus')}}</label>
          <div class="col-sm-8">
            <select class="form-control" v-model="cfg.ptzStatus">
              <option v-for="option in ptzOptions" :value="option.value">{{option.text}}</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.onvifPort')}}</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" v-model="cfg.onvifPort" number>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.soapVersion')}}</label>
          <div class="col-sm-8">
            <select class="form-control" v-model="cfg.soapVersion">
              <option v-for="option in soapVersionOptions" :value="option.value">{{option.text}}</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.tag')}}</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" v-model="cfg.tag" :placeholder="$t('tip.seg')">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-3 col-sm-3">
            <div class="checkbox">
              <label>
                <input type="checkbox" v-model="cfg.subStatus" :true-value=1 :false-value=0> {{$t('list.subStatus')}}
              </label>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="checkbox">
              <label>
                <input type="checkbox" v-model="cfg.proxyEnable" :true-value=1 :false-value=0> {{$t('list.proxyEnable')}}
              </label>
            </div>
          </div>
          <div class="col-sm-3" v-show="!batch">
            <div class="checkbox">
              <label>
                <input type="checkbox" v-model="cfg.useCustomUrl" :true-value=1 :false-value=0> {{$t('list.useCustomUrl')}}
              </label>
            </div>
          </div>
        </div>
        <div class="form-group" v-show="!batch">
          <label class="col-sm-3 control-label">{{$t('list.mainUrl')}}</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" v-model="customMainUrl" placeholder="rtsp://[username]:[password]@[ipaddr]:[port]/[path]" v-if="cfg.useCustomUrl">
            <label class="multi-line" v-else>{{showUrl(cfg.mainUrl)}}</label>
          </div>
        </div>
        <div class="form-group" v-show="!batch">
          <label class="col-sm-3 control-label">{{$t('list.previewUrl')}}</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" v-model="customPreviewUrl" placeholder="rtsp://[username]:[password]@[ipaddr]:[port]/[path]" v-if="cfg.useCustomUrl">
            <label class="multi-line" v-else>{{showUrl(cfg.previewUrl)}}</label>
          </div>
        </div>
      </form>  
    </validator>
  </div>
  <div class="modal-footer" slot="modal-footer">
    <button type="button" class="btn btn-default" @click.prevent="onQuit">{{$t('common.quit')}}</button>
    <button type="button" class="btn btn-primary" @click.prevent="onSaveChanges">{{$t('common.savechanges')}}</button>
  </div>    
</vs-modal>  
</template>

<script>
import _ from 'lodash'
import async from 'async'
import ebus from 'libs/ebus.js'
import toast from 'libs/toast.js'
import locales from '../locales/srcIpcam.js'
import {printObj, copyObj, showPublicUrl} from 'libs/utils.js'
import * as actions from 'share/server/vuex/actions/streamsrc.js'
import {streamSrcApi} from 'share/server/api.js'

export default {
  locales,
  vuex: {
    getters: {
      vendorList: (state) => state.ipcam.vendor.list
    },
    actions
  },
  computed: {
    manufactureOptions () {
      var vendorList = this.vendorList
      if (this.batch) {
        vendorList = _.filter(vendorList, (item) => {
          return item.mainPathFmt.includes('[channel]') 
            && item.subPathFmt.includes('[channel]') 
        })
      }
      return _.map(vendorList, 'manufacture')
    },
    productModelOptions () {
      let currManufacture = this.cfg.manufacture
      let filterVendors = _.filter(this.vendorList, (item) => {
        return item.manufacture === currManufacture
      })
      let allProductModels = _.map(filterVendors, (item) => {
        return JSON.parse(item.productModels);
      })
      return _.uniq(_.flatten(allProductModels))
    }
  },
  data () {
    return {
      show: false,
      cfg: {
        _id: -1,
        port: 554,
        subStatus: 1,
        manufacture: 'Hikvision',
        productModel: '*',
        username: 'admin',
        password: '12345',
        channel: 1,
        ipaddr: '192.168.1.100',
        name: 'example',
        tag: '',
        useCustomUrl: 0,
        mainUrl: '',
        previewUrl: '',
        ptzStatus: 'disable',
        onvifPort: 80,  
        soapVersion: 1,
        proxyEnable: 1,
      },
      soapVersionOptions: [{
        value: 1,
        text: '1.1'
      }, {
        value: 2,
        text: '1.2'
      }],
      ptzOptions: [{
        value: '',
        text: this.$t('onvif.auto')
      }, {
        value: 'enable',
        text: this.$t('onvif.enable')
      }, {
        value: 'disable',
        text: this.$t('onvif.disable')
      }],
      customMainUrl: '',
      customPreviewUrl: '',
      batch: false,
      startChannel: 1,
      endChannel: 5
    }
  },
  methods: {
    showUrl (url) {
      return showPublicUrl(url)
    },
    onQuit () {
      this.show = false
    },
    batchAdd () {
      let channels = _.range(this.startChannel, this.endChannel + 1)
      let baseName = this.cfg.name
      async.eachSeries(channels, function(channel, callback) {
        this.cfg.channel = channel
        this.cfg.name = baseName + channel
        streamSrcApi.setItem('ipcameras', this.cfg).then(function(res) {
          if (res && res.data && res.data.code === 0) {
            callback()
          } else {
            callback(res.data)
          }
        }.bind(this))
      }.bind(this), function(err) {
        if (err) {
          toast.code(this, err)
        }
        ebus.emit('load-ipc-dep-srcs')
      })
    },
    onSaveChanges () {
      if (this.$form.invalid) {
        toast.w(this, this.$t('common.fail'), this.$t('error.params'))
        return
      }

      if ((this.cfg.channel < 0)
        || (this.startChannel < 0)
        || (this.endChannel < 0)
        || (this.startChannel > this.endChannel)) {
        toast.w(this, this.$t('common.fail'), this.$t('error.params'))
        return
      }

      if (this.cfg.useCustomUrl) {
        this.cfg.mainUrl = this.customMainUrl
        this.cfg.previewUrl = this.customPreviewUrl
      }

      if (this.batch) {
        this.batchAdd()
      } else {
        streamSrcApi.setItem('ipcameras', this.cfg).then(function(res) {
          if (res && res.data && res.data.code === 0) {
            ebus.emit('load-ipc-dep-srcs')
          } else {
            toast.code(this, res.data)
          }
        }.bind(this))
      }
      this.show = false
    },
    onShow (val, batch) {
      copyObj(this.cfg, val)
      this.batch = batch
      this.startChannel = 1
      this.endChannel = 5
      if (this.cfg.useCustomUrl) {
        this.customMainUrl = this.cfg.mainUrl
        this.customPreviewUrl = this.cfg.previewUrl
      }
      this.show = true
    }
  },
  ready () {
    ebus.on('show-ipcam-detail', this.onShow)
  }
}
</script>

<style>
</style>